<script setup>
const props = defineProps({
  imageUrl: {
    type: String,
    default: '', // 图片 URL，默认为空
  },
  title: {
    type: String,
    default: '', // 卡片标题
  },
  description: {
    type: String,
    default: '', // 卡片描述
  },
  height: {
    type: String,
    default: '300px', // 卡片高度
  },
});

// 默认 SVG 占位图
const placeholderSvg = `
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
    <circle cx="8.5" cy="8.5" r="1.5"></circle>
    <path d="M21 15l-5-5L5 21"></path>
  </svg>
`;
</script>

<template>
  <div class="card-image" :style="{ height: props.height }">
    <div class="image">
      <!-- 如果有 imageUrl，显示图片；否则显示 SVG 占位图 -->
      <img
          v-if="props.imageUrl"
          :src="props.imageUrl"
          alt="Card Image"
      />
      <div
          v-else
          class="placeholder"
          v-html="placeholderSvg"
      ></div>
    </div>
    <div class="content">
      <h3 v-if="props.title">{{ props.title }}</h3>
      <p v-if="props.description">{{ props.description }}</p>
    </div>
  </div>
</template>

<style scoped>
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-image:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.image {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0; /* 占位图背景色 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder {
  width: 50px;
  height: 50px;
  color: #ccc; /* 占位图颜色 */
}

.content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  color: white;
}

h3 {
  margin: 0;
  font-size: 20px;
}

p {
  margin: 10px 0 0;
  font-size: 14px;
}
</style>